<template>
  <div class="wrapper flex-h flex-hsb xb_border_bottom eee">
    <div class="flex-v flex-vs left-wrapper">
      <span>{{name}}</span>
      <span>{{date}}</span>
    </div>
    <span :class="out?'money-out':'money-in'">{{(out?'-':'+')+money}}</span>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: '',
      required: true
    },
    date: {
      type: String,
      default: '',
      required: true
    },
    money: {
      type: String,
      default: '',
      required: true
    },
    out: {
      type: Boolean,
      default: true,
      required: true
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 750px;
  height: 120px;
  background: #fff;
}

.left-wrapper {
  margin: 30px 0px 0px 20px;
}
.left-wrapper > span:first-of-type {
  color: #333;
  font-size: 16px; /*no*/
  line-height: 22px; /*no*/
  font-weight: bold;
}
.left-wrapper > span:nth-of-type(2) {
  color: #aaa;
  font-size: 11px; /*no*/
  line-height: 15px; /*no*/
  margin-top: 10px;
}

.wrapper > span:last-of-type {
  font-size: 25px; /*no*/
  line-height: 35px; /*no*/
  margin: 25px 30px 0px 0px;
}

.money-out {
  color: #e84d38;
}
.money-in {
  color: #28acff;
}
</style>
